import React from 'react';

import { Checkbox, List, Stepper } from 'antd-mobile';

import style from 'styled-components'

const ShopStyle = style.div`
    .shop_item{
        display:flex;
        .shop_pic{
            img{
                width:1.8rem
                height:1.8rem
            }
            margin-right:.2rem;
        }
        .shop_cont{
            display:flex;
            flex-direction:column;
            justify-content:space-around;
            p{
                font-size:.30rem;
            }
            .style{
                font-size:.3rem;
                color:#ccc;
            }
            .price{
                font-size:.24rem;
                .vprice{
                    color:#f00;
                    padding-right:.2rem;
                }
                .oprice{
                    color:#ccc;
                }
            }
            .shop_num{
                position:absolute;
                bottom:.4rem;
                right:.3rem;
                font-size:.32rem
            }
        }
    }
    

`

const CheckboxItem = Checkbox.CheckboxItem;

const ShopItem = (props) => {
    return (
        <ShopStyle key={props.id}>
            <CheckboxItem checked={props.allflag} style={{marginBottom:'.12rem'}} key={props.id} onChange={() => props.onChange(props.value,props.value)}>
                <div className="shop_item">
                    <div className="shop_pic">
                        <img src={props.av_zpic} />
                    </div>
                    <div className="shop_cont">
                        <p>{props.title}</p>
                        <div className="style">
                            <em className="goods_color">{props.av_zvalue}</em>
                            <em className="goods_size">{props.av_fvalue}</em>
                        </div>
                        <span className="price">
                            <em className="vprice">￥{props.vprice}</em>
                            <del className="oprice">￥{props.oprice}</del>
                        </span>
                        {props.editFlag && 
                        <List.Item
                            wrap
                            extra={
                                <Stepper
                                    style={{ width: '100%', minWidth: '100px' }}
                                    showNumber
                                    max={10}
                                    min={1}
                                    value={this.state.val}
                                    onChange={props.onChange}
                                />}>
                            Show number value
                        </List.Item> 
                        || <span className="shop_num">x{props.num}</span>}
                    </div>
                </div>
            </CheckboxItem>
        </ShopStyle>
    )

}
export default ShopItem 